import React, { useEffect, useRef, useState } from 'react';
import './index.scss'
import * as echarts from 'echarts';
import { getSystem } from '../../../utils/httpAllMethods/AuthHttp.jsx'

// 头部
import PageName from '../../../components/PageName/index.jsx';



const SystemTable = ({ tableValue }) => {

  let myRef = useRef(null)

  useEffect(() => {
    var option;
    var myChart = echarts.init(myRef.current);
    option = {
      dataset: [
        {
          dimensions: ['name', 'age', 'profession', 'score', 'date'],
          source: tableValue
        },
        {
          // transform: {
          //   type: 'sort',
          //   config: { dimension: 'score', order: 'desc' }
          // }
        }
      ],
      xAxis: {
        type: 'category',
        //   axisLabel: { interval: 0, rotate: 0 }
        axisTick: {
          alignWithLabel: true,
          interval: 0,
          length: 10 // 将刻度长度设置为10
        }
      },
      yAxis: {},
      series: {
        type: 'bar',
        //   encode: { x: 'name', y: 'score' },
        //   datasetIndex: 1,
        barWidth: 40
      }
    };

    option && myChart.setOption(option);
  }, [tableValue])


  return (
    <>
      <div className='Table' ref={myRef}>

      </div>
    </>
  )
}
const System = () => {
  const [table1Value, settable1Value] = useState([])
  const [table2Value, settable2Value] = useState([])
  useEffect(() => {
    getSystem().then((res) => {
      settable1Value([['待处理需求', res.data.num1], ['待审核楼盘点评', res.data.num2], ['待审核楼盘解读', res.data.num3], ['待审核经纪人点评', res.data.num4], ['待审核服务案例', res.data.num5]])
      settable2Value([['新房楼盘', res.data.num6], ['个人用户', res.data.num7], ['经纪人', res.data.num8], ['资讯', res.data.num9], ['领取红包', res.data.num10], ['广告', res.data.num11]])
    })
  }, [])
  return (<>
    <PageName name="系统首页" />
    <div className='table-container'>

      <SystemTable tableValue={table1Value}></SystemTable>
      <h1>待处理</h1>

      <SystemTable tableValue={table2Value}></SystemTable>
      <h1>数据统计</h1>
    </div>
  </>)
}
export default System